<template>
    <view class="head">
        <view class="haeBox">
            <view class="title" v-if="type == 1">抱朴园</view>
            <view class="title" v-if="type == 2">
                <view class="img" @click="on_goUrl(1)">
                    <image src="https://bpy.noogka.com/icon/leftIcon.png"></image>
                </view>
            </view>
            <view class="input" :class="type == 1 ? 'aaa' : 'bbb'">
                <view class="img">
                    <image src="https://bpy.noogka.com/icon/18.png">
                    </image>
                </view>
                <input @confirm="on_confirm" confirm-type="搜索" v-model="valueData" placeholder="搜索商品名称" />
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        type: {
            default: false
        },
        value: {
            default: ''
        }
    },
    data() {
        return {
            valueData: ''
        }
    },
    onLoad() {
    },
    mounted() {
        if (this.type == 2) {
            console.log('触发了')
            this.valueData = this.value
        }
    },
    watch: {
        valueData(val) {
            this.valueData = val;   //valueData
        },
    },
    methods: {
        on_goUrl() {
            uni.navigateBack();
        },
        on_confirm() {
            console.log('触发')
            this.$emit('on_confirm', this.valueData)
        }
    }
}
</script>

<style lang="scss">
.head {
    background-color: #87C81F;
    height: 190rpx;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;

    .haeBox {
        display: flex;
        align-items: center;
        padding: 30rpx 20rpx;
        position: absolute;
        bottom: 0;

    }

    .title {
        font-weight: 700;
        font-size: 16px;
        color: #fff;

        .img {
            width: 54rpx;
            height: 54rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    .aaa {
        width: 350rpx;
        background-color: #fff;
    }

    .bbb {
        width: 420rpx;
        background-color: #fff;
    }

    .input {
        height: 70rpx;
        border-radius: 180rpx;
        font-size: 14px;
        border: none;
        background-color: #fff;
        margin-left: 20rpx;
        position: relative;


        .img {
            position: absolute;
            width: 46rpx;
            height: 40rpx;
            top: 50%;
            transform: translateY(-50%);
            margin: 0 16rpx 0 30rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        input {
            width: 100%;
            height: 100%;
            font-size: 14px;
            padding-left: 55px;
        }
    }
}
</style>